<template>
    <div>
        <div class="flex-end" style="margin-bottom: 10px;">
            <el-button size="mini" @click="zoomIn">放大</el-button>
            <el-button size="mini" @click="zoomOut">缩小</el-button>
            <el-button size="mini" @click="fullscreen">全屏</el-button>
        </div>
        <div class="cabinet-components-container">
            <div class="mainContainer">
                <div id="mainContainer">
                    <el-row v-for="(row, key) in cabinetList" :key="key">
                        <el-col v-for="(item, i) in row" :key="i" :span="6">
                            <div @click="slideClick(item)" class="slide-wrap">
                                <div
                                    :class="['cabinet-item', item.cabinetNum == cabinetInfo.cabinetNum ? 'active' : '']">
                                    <!-- 机柜背景图 -->
                                    <img :src="activeBg(item)" class="cabinet-bg">
                                    <div class="cabinetNum text-ov">{{ item.cabinetNum }}</div>
                                    <!-- 机柜列表 -->
                                    <div class="cabinet-list">
                                        <div v-for="n in nums" :key="n" class="flex"
                                            @mouseenter.self="enterCabinet(getUdetail(item.udetailList, n), $event)">
                                            <div class="index"> {{ n }}</div>
                                            <div :class="[
                                                'item flex-ac',

                                                //高亮状态
                                                getUdetail(item.udetailList, n).hostName == '未知设备' ? 'bright' : '',

                                                // U位上有资源
                                                getUdetail(item.udetailList, n) ? 'uheight' : ''
                                            ]">

                                                <!-- 有资源 -->
                                                <template v-if="getUdetail(item.udetailList, n).startU == n">
                                                    <span
                                                        :class="['status', uStatus(getUdetail(item.udetailList, n).pilotStatus)]">
                                                    </span>
                                                    <div class="flex-ac">
                                                        <img width="12" height="12"
                                                            :src="getImgSrc(3, getUdetail(item.udetailList, n).assetType)">
                                                        <div class="text text-ov">
                                                            {{ getUdetail(item.udetailList, n).hostNameCn }}
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="cabinet-modal" v-show="showModal && show" @mouseleave="leaveCabinet">
                <el-row type="flex" class="modal-title" justify="space-between">
                    <div>资产信息</div>
                    <el-button size="mini" type="primary" @click="goToAsset">导航到资产位置</el-button>
                </el-row>
                <div class="model-content">
                    <div class="flex staticData">
                        <div class="flex">
                            <div class="static-title">资产编号:</div>
                            <div class="text-ov">{{ modelData.assetNum }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">资产类型:</div>
                            <div class="text-ov">{{ modelData.assetTypeName }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">主机中文名:</div>
                            <div class="text-ov">{{ modelData.hostNameCn }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">主机名:</div>
                            <div class="text-ov">{{ modelData.hostName }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">所属业务:</div>
                            <div class="text-ov">{{ modelData.beSystem }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">IP地址:</div>
                            <div class="text-ov">{{ modelData.hostIp }}</div>
                        </div>
                        <div class="flex">
                            <div class="static-title">负责人:</div>
                            <div class="text-ov">{{ modelData.proLeaderName }}</div>
                        </div>
                    </div>
                </div>
                <div style="text-align: right">
                    <el-button size="mini" type="primary" @click="leaveCabinet">关闭</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import utils from "@/utils/date.js"
import imgSrc from "../../utils/imgSrc";
import panzoom from "panzoom";
import { robotToAsset } from "@/api/rabotManageApi.js";
export default {
    name: "CabinetCompontsPlus",
    props: {
        // 显示u位信息弹窗
        showModal: {
            type: Boolean,
            default: false
        },
        // 显示的机柜列表
        cabinetList: {
            type: Array,
            defaule: []
        },
        defaultCabinetInfo: {
            type: Object,
            default: () => { }
        }
    },
    // 加载机柜列表，选中的机柜
    emit: ["loadData", "selectCabinet"],
    data() {
        return {
            nums: [
                '42', '41', '40', '39', '38', '37', '36', '35', '34', '33', '32', '31', '30',
                '29', '28', '27', '26', '25', '24', '23', '22', '21', '20',
                '19', '18', '17', '16', '15', '14', '13', '12', '11', '10',
                '09', '08', '07', '06', '05', '04', '03', '02', '01'
            ],
            form: {
                selectValue: "",//下拉选中
                hostName: "",//主机名
                resourceName: "",//资源名
            },
            cabinetInfo: {},//当前选中的机柜信息
            show: false,//显示资源悬浮弹窗
            modelData: {},//资源悬浮弹窗数据
            jsPlumb: null
        }
    },

    mounted() {
        this.$nextTick(() => {
            this.cabinetInfo = this.defaultCabinetInfo;
            this.initPanZoom()
        })
    },
    methods: {
        initPanZoom() {
            const mainContainer = document.getElementById("mainContainer")
            console.log('mainContainer', mainContainer)
            const mainContainerWrap = mainContainer.parentNode
            this.jsPlumb = panzoom(mainContainer, {
                smoothScroll: false,
                bounds: true,
                transformOrigin: { x: 0.5, y: 0.5 },
                zoomDoubleClickSpeed: 1,
                minZoom: 0.5,
                maxZoom: 2,
                initialZoom: 1
            })
            // 平移时设置鼠标样式
            mainContainerWrap.style.cursor = 'grab'
            mainContainerWrap.addEventListener('mousedown', function wrapMousedown() {
                this.style.cursor = 'grabbing'
                mainContainerWrap.addEventListener('mouseout', function wrapMouseout() {
                    this.style.cursor = 'grab'
                })
            })
            mainContainerWrap.addEventListener('mouseup', function wrapMouseup() {
                this.style.cursor = 'grab'
            })
        },
        fullscreen() {
            const mainContainer = document.querySelector(".mainContainer")
            mainContainer.requestFullscreen()
        },
        zoomIn() {
            const mainContainer = document.getElementById("mainContainer")
            let rect = {
                x: 0,
                y: 0,
                width: mainContainer.clientWidth,
                height: mainContainer.clientHeight
            };
            let cx = rect.x + rect.width / 2;
            let cy = rect.y + rect.height / 2;
            this.jsPlumb.smoothZoom(cx, cy, 2);
        },
        zoomOut() {
            const mainContainer = document.getElementById("mainContainer")
            let rect = {
                x: 0,
                y: 0,
                width: mainContainer.clientWidth,
                height: mainContainer.clientHeight
            };
            let cx = rect.x + rect.width / 2;
            let cy = rect.y + rect.height / 2;
            this.jsPlumb.smoothZoom(cx, cy, 0.5);
        },
        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },

        getImgSrc(type, id) {
            return imgSrc(type, id)
        },

        uStatus(number) {
            let status = ""
            switch (number) {
                case 1:
                    status = "status1"
                    break;
                case 2:
                    status = "status2"
                    break;
                case 3:
                    status = "status3"
                    break;
                default:
                    status = "status4"
                    break;
            }
            return status
        },

        // 点击机柜
        slideClick(obj) {
            this.cabinetInfo = obj;
            this.$emit("selectCabinet", this.cabinetInfo)
        },

        /**
         * 计算区间
         * @param {*} array udetailList
         * @param {*} value 起始U
         */
        getUdetail(array, value) {
            if (!array) return false
            let uIndex = array.findIndex(({ startU, heightU }) => value < (startU + heightU) && value >= startU);
            if (uIndex > -1) {
                return array[uIndex]
            }
            return false
        },
        // 机柜背景图
        activeBg(item) {
            if (item.cabinetNum == this.cabinetInfo.cabinetNum) {
                return require("../../assets/computerRoom/active-cabinet-bg.png")
            }
            return require("../../assets/computerRoom/cabinet-bg.png")
        },
        // 鼠标进入资源
        enterCabinet(item, event) {
            if (!item) return
            let modalEl = document.querySelector(".cabinet-modal");
            const { clientX, clientY } = event;
            let letPx = clientX - 654;
            let topPx = clientY - 50
            if (topPx < 50) {
                topPx = 50
            }
            if (topPx > 550) {
                topPx = 550
            }
            modalEl.style.left = letPx + "px";
            modalEl.style.top = topPx + "px"
            this.show = true;
            this.modelData = item
        },
        // 鼠标离开
        leaveCabinet() {
            this.show = false;
            this.modelData = {}
        },
        goToAsset() {
            robotToAsset({ resourceId: this.modelData.id }).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        }
    },
}
</script>
<style lang="scss">
.cabinet-components-container {
    width: 100% !important;
    margin: 0 auto;
    height: 94%;
    overflow: auto;

    .mainContainer {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background-color: #fff;
    }

    .cabinet-item {
        width: 100%;
        height: 741px;
        color: #fff;
        font-size: 12px;
        position: relative;

        .cabinetNum {
            position: absolute;
            width: 100%;
            font-size: 12px;
            line-height: 32px;
            text-align: center;
        }

        .cabinet-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .cabinet-list {
            width: 86%;
            height: 691px;
            position: absolute;
            top: 29px;
            left: 17px;

            .flex:nth-child(odd) .item {
                background: #FFF;
            }

            .flex:nth-child(even) .item {
                background: #F0F0F0;
            }

            .item {
                flex: 1;
                color: #333;
                overflow: hidden;

                .text {
                    width: 150px;
                    margin-left: 5px;
                }

                .drop {
                    width: 100%;
                    height: 100%;

                    &.recomm {
                        background: rgba(33, 183, 149, 0.2);
                    }

                    .over {
                        border-color: #21B795;
                        background: #21B795;
                        color: #fff;
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                    }
                }

                .status {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin: 0 5px;
                    flex-shrink: 0;
                    display: inline-block;
                }

                .status1 {
                    background: #EA305C;
                }

                .status2 {
                    background: #21B795;
                }

                .status3 {
                    background: #FFCC00;
                }
            }

            .index {
                width: 17px;
                height: 16.5px;
            }

            .flex {

                .item.bg1 {
                    background-color: rgba(234, 48, 92, 0.25);
                }

                .item.bg2 {
                    background-color: rgba(184, 51, 240, 0.25);
                }

                .item.bg3 {
                    background-color: rgba(0, 150, 255, 0.25);
                }

                .item.bg4 {
                    background-color: #B4B4B4;
                }

                .item.bg5 {
                    background-color: #21B795;
                    border: 1px solid #21B795;
                }

                .item.uheight {
                    background-color: #B4B4B4;
                }

                .item.uheight.bright {
                    // border: 1px solid #21B795;
                    //  background: rgba(33, 183, 149, .6);
                    background: rgba(234, 48, 92, 0.25);
                }
            }
        }
    }

    .active {
        .cabinet-list {
            width: 85%;
        }

        .index {
            width: 20px;
        }
    }
}

.cabinet-modal {
    width: 404px;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.6);
    padding: 20px 15px;
    box-sizing: content-box;
    position: absolute;
    top: -1000px;
    left: -1000px;
    transition: .2s all;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;

    .modal-title {
        padding-bottom: 10px;
        position: relative;
    }

    .modal-title ::before {
        content: "";
        position: absolute;
        width: 433px;
        height: 1px;
        background-color: rgba(240, 240, 240, .6);
        bottom: 0px;
        left: -14px;
    }

    .model-content {
        padding-top: 10px;
        height: 90%;
        overflow: auto;

        .staticData {
            flex-wrap: wrap;

            >div {
                width: 50%;
                margin-bottom: 10px;

            }

            .flex {
                .static-title {
                    width: 45%;
                }
            }
        }

        .dynamicData {
            flex-wrap: wrap;

            div {
                margin-bottom: 10px;
                width: 50%;
            }
        }
    }

    .mb20 {
        margin: 5px 0 10px 0;
    }

    // .flex {
    //     margin: 5px 0;

    //     >div:nth-child(1) {
    //         width: 45%;
    //     }
    // }
}

.flex-ac {
    display: flex;
    align-items: center;
}

.mt15 {
    margin-top: 15px;
}

.flex {
    display: flex;
}

.flex-jsb {
    display: flex;
    justify-content: space-between;
}

.mt25 {
    margin-top: 25px;
}
</style>
